<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">元数据模型</h2>
                <p class="text-gray-600 dark:text-gray-400 mt-1">管理数据模型和字段定义</p>
            </div>
            <button class="btn-primary flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                </svg>
                新增模型
            </button>
        </div>

        <!-- 模型统计 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="card text-center">
                <div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-2">{{ totalModels }}</div>
                <div class="text-gray-600 dark:text-gray-400">总模型数</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-green-600 dark:text-green-400 mb-2">{{ activeModels }}</div>
                <div class="text-gray-600 dark:text-gray-400">启用模型</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">{{ totalFields }}</div>
                <div class="text-gray-600 dark:text-gray-400">总字段数</div>
            </div>
            <div class="card text-center">
                <div class="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-2">{{ modelCategories }}</div>
                <div class="text-gray-600 dark:text-gray-400">模型分类</div>
            </div>
        </div>

        <!-- 模型列表 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div v-for="model in models" :key="model.id"
                 class="card hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                <div class="flex items-start justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div :class="getModelIconClass(model.category)"
                             class="w-12 h-12 rounded-lg flex items-center justify-center">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="model.icon" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-gray-900 dark:text-gray-100">{{ model.name }}</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">{{ model.description }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <span :class="getStatusBadgeClass(model.status)">
                            {{ model.status === 'active' ? '启用' : '禁用' }}
                        </span>
                    </div>
                </div>

                <div class="space-y-3 mb-4">
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">字段数量</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ model.fieldCount }} 个</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">数据量</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ model.dataCount }} 条</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">创建时间</span>
                        <span class="font-medium text-gray-900 dark:text-gray-100">{{ model.createdAt }}</span>
                    </div>
                </div>

                <!-- 字段预览 -->
                <div class="mb-4">
                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">字段预览</h4>
                    <div class="space-y-1">
                        <div v-for="field in model.fields.slice(0, 3)" :key="field.id"
                             class="flex items-center justify-between text-xs p-2 bg-gray-50 dark:bg-gray-700 rounded">
                            <span class="text-gray-600 dark:text-gray-400">{{ field.name }}</span>
                            <span :class="getFieldTypeClass(field.type)">{{ field.type }}</span>
                        </div>
                        <div v-if="model.fields.length > 3"
                             class="text-xs text-gray-500 dark:text-gray-400 text-center py-1">
                            还有 {{ model.fields.length - 3 }} 个字段...
                        </div>
                    </div>
                </div>

                <div class="flex items-center gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button class="flex-1 btn-secondary text-sm">编辑</button>
                    <button class="flex-1 btn-primary text-sm">字段</button>
                    <button class="p-2 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- 模型详情弹窗 -->
        <div v-if="showModelModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div
                 class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">模型详情 - {{ selectedModel?.name }}</h3>
                    <button @click="showModelModal = false"
                            class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">模型名称</label>
                            <input type="text" :value="selectedModel?.name" class="input" />
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">模型编码</label>
                            <input type="text" :value="selectedModel?.code" class="input" />
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">模型分类</label>
                        <select class="input">
                            <option value="business">业务模型</option>
                            <option value="system">系统模型</option>
                            <option value="config">配置模型</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">描述</label>
                        <textarea class="input" rows="3" :value="selectedModel?.description"></textarea>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">状态</label>
                            <select class="input">
                                <option value="active">启用</option>
                                <option value="inactive">禁用</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">排序</label>
                            <input type="number" :value="selectedModel?.sort" class="input" />
                        </div>
                    </div>
                </div>

                <div
                     class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <button @click="showModelModal = false" class="btn-secondary">取消</button>
                    <button class="btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="meta-model">
import { ref, computed } from 'vue'

defineOptions({ name: 'meta-model' })

const models = ref([
    {
        id: 1,
        name: '用户模型',
        code: 'user',
        description: '系统用户信息模型',
        category: 'business',
        status: 'active',
        fieldCount: 12,
        dataCount: 1234,
        createdAt: '2024-01-01',
        sort: 1,
        icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z',
        fields: [
            { id: 1, name: 'id', type: 'int', required: true },
            { id: 2, name: 'username', type: 'varchar', required: true },
            { id: 3, name: 'email', type: 'varchar', required: true },
            { id: 4, name: 'password', type: 'varchar', required: true },
            { id: 5, name: 'status', type: 'enum', required: true }
        ]
    },
    {
        id: 2,
        name: '角色模型',
        code: 'role',
        description: '用户角色权限模型',
        category: 'system',
        status: 'active',
        fieldCount: 8,
        dataCount: 15,
        createdAt: '2024-01-05',
        sort: 2,
        icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
        fields: [
            { id: 1, name: 'id', type: 'int', required: true },
            { id: 2, name: 'name', type: 'varchar', required: true },
            { id: 3, name: 'code', type: 'varchar', required: true },
            { id: 4, name: 'description', type: 'text', required: false }
        ]
    },
    {
        id: 3,
        name: '部门模型',
        code: 'department',
        description: '组织架构部门模型',
        category: 'business',
        status: 'active',
        fieldCount: 10,
        dataCount: 25,
        createdAt: '2024-01-10',
        sort: 3,
        icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
        fields: [
            { id: 1, name: 'id', type: 'int', required: true },
            { id: 2, name: 'name', type: 'varchar', required: true },
            { id: 3, name: 'code', type: 'varchar', required: true },
            { id: 4, name: 'parent_id', type: 'int', required: false },
            { id: 5, name: 'leader', type: 'varchar', required: false }
        ]
    },
    {
        id: 4,
        name: '菜单模型',
        code: 'menu',
        description: '系统菜单导航模型',
        category: 'system',
        status: 'active',
        fieldCount: 15,
        dataCount: 45,
        createdAt: '2024-01-12',
        sort: 4,
        icon: 'M4 6h16M4 12h16M4 18h16',
        fields: [
            { id: 1, name: 'id', type: 'int', required: true },
            { id: 2, name: 'name', type: 'varchar', required: true },
            { id: 3, name: 'path', type: 'varchar', required: true },
            { id: 4, name: 'icon', type: 'varchar', required: false },
            { id: 5, name: 'parent_id', type: 'int', required: false },
            { id: 6, name: 'sort', type: 'int', required: true }
        ]
    },
    {
        id: 5,
        name: '配置模型',
        code: 'config',
        description: '系统配置参数模型',
        category: 'config',
        status: 'active',
        fieldCount: 6,
        dataCount: 128,
        createdAt: '2024-01-15',
        sort: 5,
        icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z',
        fields: [
            { id: 1, name: 'id', type: 'int', required: true },
            { id: 2, name: 'key', type: 'varchar', required: true },
            { id: 3, name: 'value', type: 'text', required: true },
            { id: 4, name: 'description', type: 'varchar', required: false }
        ]
    }
])

const showModelModal = ref(false)
const selectedModel = ref<any>(null)

const totalModels = computed(() => models.value.length)
const activeModels = computed(() => models.value.filter(model => model.status === 'active').length)
const totalFields = computed(() => models.value.reduce((sum, model) => sum + model.fieldCount, 0))
const modelCategories = computed(() => new Set(models.value.map(model => model.category)).size)

function getModelIconClass(category: string) {
    const classes = {
        'business': 'bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400',
        'system': 'bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400',
        'config': 'bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400'
    }
    return classes[category as keyof typeof classes] || classes['business']
}

function getStatusBadgeClass(status: string) {
    return status === 'active'
        ? 'px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded-full'
        : 'px-2 py-1 bg-gray-100 text-gray-800 dark:bg-gray-900/20 dark:text-gray-400 text-xs rounded-full'
}

function getFieldTypeClass(type: string) {
    const classes = {
        'int': 'px-1 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-400 text-xs rounded',
        'varchar': 'px-1 py-0.5 bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400 text-xs rounded',
        'text': 'px-1 py-0.5 bg-purple-100 text-purple-800 dark:bg-purple-900/20 dark:text-purple-400 text-xs rounded',
        'enum': 'px-1 py-0.5 bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400 text-xs rounded'
    }
    return classes[type as keyof typeof classes] || classes['varchar']
}
</script>